<template>
	<view class="uni_box">
		<!-- 顶部兼容组件APP端 -->
		
		<view class="newcontent">
			<Nheader></Nheader>

			<!-- 轮播图 -->
			<view class="lun">
				<u-swiper :list="lunlist" :effect3d="true" bg-color="#fff" height="320" effect3d-previous-margin="60"  @click="swclick"></u-swiper>
			</view>
			<!-- 分类 -->
			<view class="flei">
				<classifiy :ClassList="ClassList"></classifiy>
			</view>
			<!-- 考试季 -->
			<view class="kaoji">
				<view class="kaoone">
					<image src="/static/home/kaoleft.png" class="kaoleft" mode=""></image>
					<text class="ktit">{{cateinfo.name}}考试季</text>
					<image src="/static/home/kaoright.png" class="kaoleft" mode=""></image>
				</view>
				<view class="katwo">
					<view class="kaoxuan">
						<view class="xuanitem" @click="getkao(1)">
							<text class="xuantit">{{koneinfo.name?koneinfo.name:'请选择'}}</text>
							<u-icon name="arrow-down" class="getfan" color="#ccc" size="28"></u-icon>
						</view>
						<view class="xuanitem ml" @click="getkao(2)">
							<text class="xuantit">{{ktwoinfo.name?ktwoinfo.name:'请选择'}}</text>
							<u-icon name="arrow-down" class="getfan" color="#ccc" size="28"></u-icon>
						</view>
					</view>
					<view class="kaoxuan">
						<view class="xuanitem" style="width: 100%;">
							<u-input v-model="phone" type="text" :border="false" placeholder="请输入您的联系方式"/>
						</view>
					</view>
					<view class="yyue" @click="getyuyue">立即预约</view>
				</view>
				<view class="kathree">
					<view class="kaitem">
						<image src="/static/home/kaodui.png" class="kaodui" mode=""></image>
						<text class="katit">报名时间提醒</text>
					</view>
					<view class="kaitem">
						<image src="/static/home/kaodui.png" class="kaodui" mode=""></image>
						<text class="katit">查分提醒</text>
					</view>
				</view>
			</view>
			<!-- 分享-直播课堂-->
			<view class="ketan plr">
				<!-- <view class="nbiao">
					<image src="/static/home/zhibo.png" class="zhiboicon" mode=""></image>
					<text class="ftit">分享·融跃</text>
				</view> -->
				<view class="nbthree" v-if="zhibolist">
					<text class="zhitit">热门直播</text>
					<view class="gd"  @click="getprohome">
						<text class="gdtit">查看更多</text>
						<image src="/static/home/you.png" class="you" mode=""></image>
					</view>
				</view>
				<view class="neitwo" v-if="zhibolist">
					<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
						:duration="duration" :current="swcurrent" @change="swchange" next-margin="30px">
						<swiper-item class="swiperitem" v-for="(item, index) in zhibolist" :key="index"  @click="zhilistClick(item)">
							<view class="sview">
								<text class="sjian">{{item.time}}</text>
								<!-- <view class="rbiao">
									<image src="/static/home/leis.png" class="leis" mode=""></image>
									<view class="rbview">
										{{item.cate_name}}
									</view>
								</view> -->
								<text class="rbati">{{item.title}}</text>
								<view class="lunone">
									<image class="jtou" :src="item.teacher_image" />
									<view class="jiright">
										<text class="jiname">{{item.teacher_name}}</text>
									</view>
								</view>
								<view class="lunwen">
									<view class="hui" v-if="item.button_text">{{item.button_text}}</view>
									<text class="mfei" v-if="item.free_text">{{item.free_text}}</text>
								</view>
							</view>
						</swiper-item>
					</swiper>
				</view>
				<!-- <view class="cahzhibo">
					查看更多直播
				</view> -->
			</view>
			<view class="yin"></view>
			<!-- 体验课堂 -->
			<view class="ketan plr">
				<view class="nbthree">
					<text class="zhitit">免费试学</text>
					<view class="gd" @click="getmore(1)">
						<text class="gdtit">查看更多</text>
						<image src="/static/home/you.png" class="you" mode=""></image>
					</view>
				</view>
<!-- 
				<view class="tabview">
					<u-tabs :list="tiyanlist" :is-scroll="true" :current="tiyantabcurrent" @change="tiyantabchange" active-color="#FA7938" inactive-color="#CCCCCC"></u-tabs>
				</view> -->
				<view class="tilist">
					<view class="tiitem" v-for="(item,index) in tiyandata" :key="index" @click="getToDetail(item,1)">
						<image :src="item.image" class="itemimg" mode=""></image>
						<view class="itembot">
							<text class="tbiao">{{item.title}}</text>
							<text class="timiao">{{item.subtitle}}</text>
							<view class="linview">
								<view class="liji" v-if="item.button_text">{{item.button_text}}</view>
								<text class="mian" v-if="item.free_text">{{item.free_text}}</text>
							</view>
						</view>
					</view>
				</view>
				<!-- <view class="cahzhibo">
					更多CFA试学
				</view> -->
			</view>
			<view class="yin"></view>
			<!-- 学习-融跃 -->
			<view class="ketan plr">
				<view class="nbthree">
					<text class="zhitit">课程推荐</text>
					<view class="gd"  @click="getmore(2)">
						<text class="gdtit">查看更多</text>
						<image src="/static/home/you.png" class="you" mode=""></image>
					</view>
				</view>
<!-- 
				<view class="tabview" style="margin-top: 20rpx;">
					<u-tabs :list="xuexilist" :is-scroll="true" :current="xuexitabcurrent" @change="xuexitabchange" active-color="#FA4E4E" inactive-color="#CCCCCC" bg-color="#F6F7FB"></u-tabs>
				</view> -->
				<view class="tilist-xue">
					<view class="tiitem" v-for="(item,index) in xuexidata" :key="index"  @click="getToDetail(item,2)">
						<image :src="item.image" class="itemimg" mode=""></image>
						<view class="itembot">
							<text class="tbiao">{{item.title}}</text>
							<view class="linview">
								<text class="jine">¥<text class="jinnum">{{item.price}}</text></text>
								<text class="mian">{{item.buy_nums}}人已购买</text>
							</view>
						</view>
					</view>
				</view>
				<!-- <view class="cahzhibo">
					更多CFA课程
				</view> -->
				<view class="nbthree">
					<text class="zhitit">图书教材</text>
					<view class="gd"  @click="getmore(3)">
						<text class="gdtit">查看更多</text>
						<image src="/static/home/you.png" class="you" mode=""></image>
					</view>
				</view>

				<!-- <view class="tabview">
					<u-tabs :list="tushulist" :is-scroll="true" :current="tushutabcurrent" @change="tushutabchange" active-color="#FA7938" inactive-color="#CCCCCC" bg-color="#F6F7FB"></u-tabs>
				</view> -->
				<view class="tilist-jiaocai">
					<view class="tiitem-two" v-for="(item,index) in tushudata" :key="index"  @click="getToDetail(item,3)">
						<image :src="item.image" class="itemimg" mode=""></image>
						<view class="itembot">
							<text class="tbiao txt">{{item.title}}</text>
							<text class="timiao">{{item.subtitle}}</text>
							<view class="linview">
								<text class="jine">¥<text class="jinnum">{{ item.price }}</text></text>
								<text class="mian">{{item.tag}}</text>
							</view>
						</view>
					</view>
				</view>
				<!-- <view class="cahzhibo">
					更多CFA图书教材
				</view> -->
			</view>
			<view class="yin"></view>
			

			<!-- 实力-融跃 -->
			<view class="ketan">
				<view class="nbiao plr" style="margin-top: 30rpx;">
					<!-- <image src="/static/home/ren.png" class="zhiboicon" mode="" style="width: 38rpx;height: 34rpx;"></image> -->
					<text class="ftit">专业师资</text>
				</view>
				<view class="shiliview">
					<swiper  class="swiper-block-shili"  :interval="3000" :duration="1000" @change="swiperChange"  previous-margin='90rpx' next-margin='90rpx' :indicator-dots="false">
						<swiper-item v-for="(item, index) in shizidata" :key="index" class="swiper-item-shili" @click.stop="getToDetail(item,5)">
							<!-- <image :src="item"  :class="['slide-image', currentIndex === index?'active':'']" mode="aspectFill" ></image> -->
							<view class="skaoview" :class="['slide-image', currentIndex === index?'active':'']">
								<image :src="item.image" class="kaooneimg" mode=""   @click.stop="previewImage(index, item)"></image>
								<view class="jinpai">
									<text class="jinname">{{item.name}}</text>
									<view class="bqian">
										<text class="qianitem" v-for="(i,ind) in item.tag" :key="ind">{{i}}</text>
									</view>
								</view>
							</view>
						</swiper-item>
					</swiper>

				</view>
			</view>	

			<view class="yin"></view>
			<!-- 资讯-融跃 -->
			<view class="ketan plr">
				<view class="nbiao" style="margin-top: 30rpx;">
					<!-- <image src="/static/home/zixun.png" class="zhiboicon" mode="" style="width: 36rpx;height: 38rpx;"></image> -->
					<text class="ftit">考试资讯</text>
				</view>
				<!-- <view class="kaoview">
					<view class="kaoleft kactive">考试资讯</view>
					<view class="kaoleft">企业资讯</view>
				</view> -->
				<view class="tabview" style="margin-top: 20rpx;">
					<u-tabs :list="zixunlist" :is-scroll="true" :current="zixuntabcurrent" @change="zixuntabchange" active-color="#FA4E4E" inactive-color="#CCCCCC"></u-tabs>
				</view>
				<view class="tilist-kao">
					<view class="kaoitem" v-for="(item,index) in zixundata" :key="index" @click="getToDetail(item,4)">
						<view class="kaoleft">
							<text class="kaotit">{{ item.title }}</text>
							<view class="kaobot">
								<view class="kaoqi">
									<image src="/static/home/zixun.png" class="ticon" mode=""></image>
									<text class="sjians">{{item.time}}</text>
								</view>
								<view class="kaoqi">
									<image src="/static/home/zixun.png" class="ticon" mode=""></image>
									<text class="sjians">{{item.views}}</text>
								</view>
							</view>
						</view>
						<image :src="item.image" class="itemimg" mode=""></image>
					</view>
				</view>
				<view class="cahzhibo" @click="getmore(4)">
					更多相关资讯
				</view>
			</view>	
			<!-- 发展-融跃 -->
			<!-- <view class="ketan plr">
				<view class="nbiao">
					<image src="/static/home/zixun.png" class="zhiboicon" mode="" style="width: 36rpx;height: 38rpx;"></image>
					<text class="ftit">发展·融跃</text>
				</view>
				<view class="kaoview">
					<view class="kaoleft kactive">融跃合作</view>
					<view class="kaoleft">融跃发展</view>
				</view>
				<view class="xie">
					<text>携手国内外知名机构，全面打造
					国际型教育品牌</text>
				</view>

				<view class="pinlist">
					<view class="pinitem" v-for="(item,index) in 9" :key="index">
						<image src="/static/home/Kaplan_logo.png" class="Kaplan_logo" mode="widthFix"></image>
					</view>
				</view>
			</view>	 -->

			<!-- 底部导航组件 -->
			<!-- <Botnavigation></Botnavigation> -->

			<!-- 底部导航 -->
			<Tabbar :current="0"></Tabbar>
		</view>
		<!-- 预约弹窗 -->
		<view class="st">
			<u-popup v-model="yueshow" mode="center" @close="yueshow=false" width="80%" :closeable="true">
				<view class="stpop">
					<!-- <view class="chaview">
						<image class="macha" src="@/pages_subject/static/img/macha.png" mode="" />
					</view> -->
					<image class="mapop" mode="widthFix" :src="taninfo.image" />
					<!-- <text class="matit">注：{{taninfo.title}}</text> -->
				</view>
			</u-popup>
		</view>
		<u-select v-model="kshow" :list="klist" label-name="name" value-name="id" @confirm="kconfirm"></u-select>
</view>
</template>

<script>
import classifiy from '@/components/classifiy/classifiy'
export default {
	data() {
		return {
			lunlist:[
				// {
				// 	image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
				// 	title: '昨夜星辰昨夜风，画楼西畔桂堂东'
				// },
				// {
				// 	image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
				// 	title: '身无彩凤双飞翼，心有灵犀一点通'
				// },
				// {
				// 	image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
				// 	title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
				// }
			],
			ClassList:[
				// {
				// 		id:  4,
				// 		name:  "生活",
				// 		icon:  [
				// 				{
				// 						name:  "省钱话费",
				// 				},
				// 				{
				// 						name:  "省钱话费",
				// 				},
				// 				{
				// 						name:  "省钱话费",
				// 				},
				// 				{
				// 						name:  "省钱话费",
				// 				},
				// 				{
				// 						name:  "省钱话费",
				// 				}
				// 	]
				// }
			],
			indicatorDots: false,
			autoplay: true,
			interval: 5000,
			duration: 1500,
			swcurrent: 0,
			count:5,
			pinlist:[
				{
					avatar:'https://cdn.uviewui.com/uview/swiper/1.jpg',
					nickname:'测试昵称',
					content:'谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
				},
				{
					avatar:'https://cdn.uviewui.com/uview/swiper/1.jpg',
					nickname:'测试昵称',
					content:'谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
				},
				{
					avatar:'https://cdn.uviewui.com/uview/swiper/1.jpg',
					nickname:'测试昵称',
					content:'谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
				}
			],
			tablist:[
				{
					name: 'CFA'
				}, {
					name: 'FRM'
				}, {
					name: 'ACCA'
				},{
					name:'CPA'
				},{
					name: 'CFA'
				}, {
					name: 'FRM'
				}, {
					name: 'ACCA'
				},{
					name:'CPA'
				}
			],
			tabcurrent:0,
			currentIndex: 0,
			posterData:[
				'https://dywifi.oss-cn-hangzhou.aliyuncs.com/qrcode/4/073121/1f6959827c20ca0376c83f44f1d1e4ac.png',
				'https://dywifi.oss-cn-hangzhou.aliyuncs.com/qrcode/4/073121/1f6959827c20ca0376c83f44f1d1e4ac.png',
				'https://dywifi.oss-cn-hangzhou.aliyuncs.com/qrcode/4/073121/1f6959827c20ca0376c83f44f1d1e4ac.png',
			],
			zixuninfo:{

			},
			zixunlist:[],
			zixundata:[],//咨询数据
			zixuntabcurrent:0,

			tushulist:[],//图书列表
			tushuinfo:{},
			tushutabcurrent:0,
			tushudata:[],

			xuexilist:[],//学习融跃
		    xuexiinfo:{},
			xuexitabcurrent:0,
			xuexidata:[],

			tiyanlist:[],//体验课程
		    tiyaninfo:{},
			tiyantabcurrent:0,
			tiyandata:[],

			zhibolist:[],//直播课堂

			cate_id:'1',
			phone:'',
			shizidata:[],//专业师资

			kone:[],
			koneinfo:{},
			ktwo:[],
			ktwoinfo:{},
			ktype:1,//1左侧选择 2右侧选择
			kshow:false,
			klist:[],
			taninfo:{
				image:'',
				title:''
			},
			yueshow:false,
			cateinfo:{
				name:'CFA'
			}
		}
	},
	components: {
		classifiy
	},
	computed: {
	},

	mounted() {

	},
	async onLoad(option) {
		if(option.cate_id){
			this.cate_id = option.cate_id
		}
		this.getinit()
	},
	async onShow() {
		
	},
	onReachBottom: function () {
	},
	methods: {
		getinit(){
			this.CateList()
			// this.fgetCate();//分类
			this.fgetZhiboList();//直播课程
			this.fgetBanner();//轮播图
			this.fgetMenu();//金刚区
			this.getxuexi();//课程推荐
			this.gettushu();//图书教材
			this.getzixunClass();//咨询分类
			this.getshizi();//专业师资
			this.fgetCateDataByCate();//首页考试季参数
		},
		async CateList(){
			let res = await this.$u.api.getCate({
			});
			let data = res 
			for(let i in data){
				if(this.cate_id == data[i].id){
					this.cateinfo = data[i]
				}
			}
			// this.zixunlist = res
		},	
		async getzixunClass(){
			let res = await this.$u.api.getArticleType({
				cate_id:this.cate_id
			});
			this.zixunlist = res
			if(res){
				//咨询
				this.zixuninfo = res[0]
				this.getzixun();
			}
		},
		async CateList(){
			let res = await this.$u.api.getCate({
			});
			this.zixunlist = res
			this.tushulist = res
			this.xuexilist = res
			this.tiyanlist = res
			if(res){
				//咨询
				this.zixuninfo = res[0]
				this.getzixun();
				// 图书
				this.tushuinfo = res[0]
				this.gettushu();
				// 学习
				this.xuexiinfo = res[0]
				this.getxuexi();
				// 体验课程
				this.tiyaninfo = res[0]
				this.gettiyan();
			}
		},
		async fgetMenu(){//金刚区
			let res = await this.$u.api.getMenuByCate({
				cate_id:this.cate_id
			});
			this.ClassList = res
		},
		async fgetZhiboList(){//直播课程
			let res = await this.$u.api.getZhiboListByCate({
				cate_id:this.cate_id
			});
			this.zhibolist = res
		},
		async getzixun(){
			let res = await this.$u.api.getNewsListByCate({
				type_id:this.zixuninfo.id,
				cate_id:this.cate_id
			});
			this.zixundata = res
		},
		async gettushu(){
			let res = await this.$u.api.getBookListByCate({
				cate_id:this.cate_id
			});
			this.tushudata = res
		},
		async getxuexi(){
			let res = await this.$u.api.getStudyListByCate({
				cate_id:this.cate_id
			});
			this.xuexidata = res
		},
		async gettiyan(){
			let res = await this.$u.api.getTiyanList({
				cate:this.tiyaninfo.id
			});
			this.tiyandata = res
		},
		async fgetBanner(){
			let res = await this.$u.api.getBanner({
				mark:'h5-cf-index'
			});
			this.lunlist=res
		},
		async getshizi(){
			let res = await this.$u.api.getTeacherList({
				cate_id:this.cate_id
			});
			this.shizidata = res
		},
		async fgetCateDataByCate(){
			let res = await this.$u.api.getCateDataByCate({
				cate_id:this.cate_id
			});
			this.kone = res
			// console.log(res[0])
			if(res[0]){
				this.ktwo = res[0].list
			}
			
		},
		swchange(e){
			// console.log(e)
		},
		tabchange(e){
			this.tabcurrent = e
		},
		swiperChange(event) {
			console.log(event)
			this.currentIndex = event.detail.current
			this.currentPoster = this.posterData.poster[this.currentIndex]
			// console.log(this.currentPoster)
		},
		previewImage(index, url){
			console.log('index', index)
			let a = []
			a.push(url.image)
			uni.previewImage({
				current: url.image, //预览图片的下标
				urls: a //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
			})
		},
		zixuntabchange(e){
			this.zixuntabcurrent = e
			let zixunlist = this.zixunlist
			this.zixuninfo = zixunlist[e]
			this.getzixun();
		},
		tushutabchange(e){
			this.tushutabcurrent = e
			let tushulist = this.tushulist
			this.tushuinfo = tushulist[e]
			this.gettushu();
		},
		xuexitabchange(e){
			this.xuexitabcurrent = e
			let xuexilist = this.xuexilist
			this.xuexiinfo = xuexilist[e]
			this.getxuexi();
		},
		tiyantabchange(e){
			this.tiyantabcurrent = e
			let tiyanlist = this.tiyanlist
			this.tiyaninfo = tiyanlist[e]
			this.gettiyan();
		},
		getkao(e){
			this.ktype = e
			if(e == 1){
				this.klist = this.kone
			}else if(e == 2){
				this.klist = this.ktwo
			}
			this.kshow = true
		},
		kconfirm(e){
			// console.log(e)
			if(this.ktype == 1){
				this.koneinfo.name = e[0].label
				this.koneinfo.id = e[0].value
				this.ktwoinfo = {}
			}else if(this.ktype == 2){
				this.ktwoinfo.name = e[0].label
				this.ktwoinfo.id = e[0].value
			}
		},
		swclick(e){
			this.toPage(this.lunlist[e])
		},
		getprohome(){
			this.navrouter("/pages/tabbar/ZhiboCenter");//直播中心
		},
		zhilistClick(item){
			//点击直播列表
			if(item.button_type == 0){
				//立即预约
				this.taninfo.image = item.yuyue_image
				this.yueshow = true
			}else if(item.button_type == 2){
				//跳转直播回放
			}else if(item.button_type == 1){
				//跳转正在直播
			}
		},
		async getyuyue(){
			//点击预约
			if(!this.koneinfo.id){
				this.$u.toast("请选择一级");
				return false;
			}
			if(!this.ktwoinfo.id){
				this.$u.toast("请选择一级");
				return false;
			}
			if(!this.phone){
				this.$u.toast("请输入联系方式");
				return false;
			}
			let res = await this.$u.api.addKaoshiYuyue({
				mobile:this.phone,
				id:this.ktwoinfo.id
			});
			this.$u.toast("预约成功");
			
		},
		getToDetail(item,type){
			if(type == 1){
				//试听中心跳转
				if(item.button_type == 0||item.button_type == 2){
					//立即领取
					this.taninfo.image = item.wechat_image
					this.yueshow = true
				}else{
					this.toPage(item)
				}
				
			}else if(type == 2){
				//学习
				this.toPage(item)
			}else if(type == 3){
				//书籍
				this.toPage(item)
			}else if(type == 4){
				//资讯
				this.toPage(item)
			}else if(type == 5){
				//专业师资
				this.toPage(item)
			}
		},
		getmore(type){
			if(type == 1){
				//更多试学
				this.navrouter("/pages/tabbar/ShiTingCenter?id="+this.tiyaninfo.id);//直播中心
			}else if(type == 2){
				//学习
				this.navrouter("/pages_subject/twoPage/StudPage/KeCheng?id="+this.xuexiinfo.id+'&leitype=1');//学习
			}else if(type == 3){
				//书籍
				this.navrouter("/pages_subject/twoPage/StudPage/KeCheng?id="+this.xuexiinfo.id+'&leitype=2');//图书中心
			}else if(type == 4){
				//资讯
				this.navrouter("/pages/tabbar/ZiXunList?id="+this.xuexiinfo.id);//资讯列表
			}
		},
		
	}
}
</script>

<style lang="scss" scoped>

.newcontent {
	min-height: 100vh;
	padding-bottom: 120rpx;
	background-color: #fff;
	.lun{
		margin: 20rpx 0 50rpx;
	}
	.plr{
		padding: 0 30rpx;
	}
	.ketan{
		// padding: 0 30rpx;
		margin-bottom: 40rpx;
		margin-top: 10rpx;
	}
	.nbiao{
		display: flex;
		flex-direction: row;
		align-items: center;
		.zhiboicon{
			width: 38rpx;
			margin-right: 15rpx;
			height: 36rpx;
		}
		.ftit{
			font-family: PingFangSC;
			font-weight: 800;
			font-size: 38rpx;
			color: #111111;
		}
	}
	.nbtwo{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin: 49rpx 0 40rpx;
		.icons{
			width: 49rpx;
			height: 14rpx;

		}
		.zhitit{
			display: inline-block;
			font-family: PingFangSC;
			font-weight: 800;
			font-size: 34rpx;
			color: #333333;
			margin: 0 28rpx;
		}
	}
	.nbthree{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		margin: 49rpx 0 30rpx;
		.zhitit{
			display: inline-block;
			font-family: PingFangSC;
			font-weight: 800;
			font-size: 36rpx;
			color: #333333;
		}
		.gd{
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-left: auto;
			.gdtit{
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #CCCCCC;
			}
			.you{
				width: 10rpx;
				height: 20rpx;
				margin-left: 12rpx;
			}
		}
	}
	.neitwo{
		margin-bottom: 30rpx;
		.swiper {
			// width: 50%;
			flex: 1;
			// margin: 0 20rpx;
			height: 437rpx;
			.swiperitem {
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				width: 360rpx !important;
				margin-right: 30rpx;
				height: 437rpx !important;
				// background: #000;
				// box-shadow: 0rpx 0rpx 24rpx 0rpx rgba(216,216,216,0.35);
				// border-radius: 16rpx;
				.sview{
					width: 90%;
					height: 95%;
					display: flex;
					flex-direction: column;
					box-shadow: 0px 0px 12px 0px rgba(216, 216, 216, 0.35);
					border-radius: 8px;
					background-color: #fff;
					padding: 30rpx;
					position: relative;
					.rbiao{
						position: absolute;
						right: 0;
						top: 20rpx;
						width: 80rpx;
						height: 40rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						.leis{
							position: absolute;
							width: 100%;
							height: 100%;
						}
						.rbview{
							position: relative;
							width: 100%;
							height: 100%;
							display: flex;
							align-items: center;
							justify-content: center;
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 22rpx;
							color: #FFFFFF;
							padding-top: 10rpx;
						}
					}
					.rbati{
						font-family: PingFangSC;
						font-weight: bold;
						font-size: 28rpx;
						color: #111111;
						display: block;
						margin: 30rpx 0 20rpx;
					}
					.sjian{
						width: 145rpx;
						font-family: PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
					}
					.lunone{
						display: flex;
						flex-direction: row;
						align-items: center;
						width: 100%;
						margin-bottom: 15rpx;
						.jtou{
							width: 66rpx;
							height: 66rpx;
							margin-right: 15rpx;
							border-radius: 50%;
						}
						.jiright{
							display: flex;
							flex-direction: column;
							.jiname{
								// max-width: 80%;
								display: inline-block;
								font-weight: 500;
								font-size: 24rpx;
								color: #111111;
							}

						}

					}
					.lunwen{
						display: flex;
						flex-direction: row;
						align-items: center;
						margin-top: auto;
						.hui{
							display: flex;
							align-items: center;
							justify-content: center;
							width: 130rpx;
							height: 52rpx;
							background: linear-gradient(-90deg, #FA4E4E, #FD894F);
							border-radius: 26rpx;
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 22rpx;
							color: #FFFFFF;
						}
						.mfei{
							margin-left: auto;
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 22rpx;
							color: #46C564;
						}
					}
					.iosheight{
						height: 196rpx;
					}

				}
			}

			.cetit {
				font-size: 20px;
				font-weight: 500;
				display: block;
				margin-bottom: 20rpx;
				color: rgba(255, 255, 255, 1);
				font-family: "Tangerine" !important;
			}
		}

		.xians {
			position: absolute;
			width: 100%;
			height: 100%;
		}

		.swiper-item {
			position: relative;

			.jiaobg {
				position: absolute;
				width: 100%;
				height: 100%;
			}
		}

		.twoimg {
			transform: rotate(180deg);
		}
	}
	.cahzhibo{
		height: 80rpx;
		border-radius: 10rpx;
		border: 1px solid #EEEEEE;
		margin-top: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #999999;
	}
	.tabview{
		border-bottom: 1rpx solid #eee;

	}
	.tilist{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin-top: 35rpx;
		.tiitem{
			width: 48%;
			display: flex;
			flex-direction: column;
			margin-bottom: 40rpx;
			background: #FFFFFF;
			border-radius: 26rpx;
			box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(202,205,217,0.3);
			.itemimg{
				width: 100%;
				height: 200rpx;
				border-radius: 26rpx;
			}
			.itembot{
				padding: 25rpx 20rpx;

			}
			.tbiao{
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #111111;
				display: block;
				margin-bottom: 15rpx;

			}
			.timiao{
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 22rpx;
				color: #999999;
			}
			.linview{
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-top: 25rpx;
				.liji{
					padding: 15rpx 20rpx;
					background: #FFF0F0;
					border-radius: 26rpx;
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 22rpx;
					color: #FA4E4E;
				}
				.mian{
					margin-left: auto;
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 22rpx;
					color: #46C564;
				}
			}
			
		}
		.tiitem:nth-child(even){
			margin-left: auto;
		}
	}

	.tilist-xue{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin-top: 35rpx;
		.tiitem{
			width: 48%;
			display: flex;
			flex-direction: column;
			margin-bottom: 40rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(202,205,217,0.3);
			.itemimg{
				width: 100%;
				height: 200rpx;
				border-radius: 10rpx 10rpx 0 0;
			}
			.itembot{
				padding: 25rpx 20rpx;

			}
			.tbiao{
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #111111;
				display: block;
				margin-bottom: 15rpx;

			}
			.timiao{
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 22rpx;
				color: #999999;
			}
			.linview{
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-top: 30rpx;
				.liji{
					padding: 15rpx 20rpx;
					background: #FFF0F0;
					border-radius: 26rpx;
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 22rpx;
					color: #FA4E4E;
				}
				.mian{
					margin-left: auto;
					font-weight: 500;
					font-size: 20rpx;
					color: #CCCCCC;
				}
				.jine{
					font-family: DIN;
					font-weight: bold;
					font-size: 20rpx;
					color: #FA4E4E;
					.jinnum{
						font-size: 32rpx;
					}
				}
			}
			
		}
		.tiitem:nth-child(even){
			margin-left: auto;
		}
	}
	.tilist-jiaocai{
		margin-top: 40rpx;
		.tiitem-two{
			display: flex;
			flex-direction: row;
			background: #FFFFFF;
			border-radius: 10rpx;
			padding: 20rpx;
			margin-bottom: 30rpx;
			.itemimg{
				width: 260rpx;
				height: 160rpx;
				background: #F8F8F8;
				border-radius: 10rpx;
				margin-right: 20rpx;
			}
			.itembot{
				flex: 1;
				display: flex;
				flex-direction: column;
				.tbiao{
					max-width: 100%;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #111111;
					display: inline-block;
				}
				.timiao{
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
					display: inline-block;
					margin-top: 20rpx;
				}

				.linview{
					display: flex;
					margin-top: auto;
					flex-direction: row;
					align-items: center;
					.jine{
						font-family: DIN;
						font-weight: bold;
						font-size: 20rpx;
						color: #FA4E4E;
						.jinnum{
							font-size: 32rpx;
						}
						
					}
					.mian{
						margin-left: auto;
						font-family: PingFang SC;
						font-weight: 400;
						font-size: 22rpx;
						color: #46C564;
					}
				}
			}
		}
	}
	
	.kaoview{
		width: 100%;
		height: 80rpx;
		background: #F8F8F8;
		border-radius: 40rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 40rpx;
		.kaoleft{
			width: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: PingFangSC;
			font-weight: bold;
			font-size: 28rpx;
			color: #CCCCCC;
			height: 100%;
		}
		.kactive{
			background: linear-gradient(-90deg, #FA4E4E, #FD894F);
			border-radius: 40rpx;
			font-family: PingFangSC;
			font-weight: bold;
			font-size: 28rpx;
			color: #FFFFFF;
		}
	}
	.tilist-kao{
		margin-top: 40rpx;
		.kaoitem{
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(202,205,217,0.3);
			padding: 20rpx;
			display: flex;
			flex-direction: row;
			margin-bottom: 30rpx;
			align-items: center;
			.itemimg{
				width: 230rpx;
				height: 150rpx;
				margin-left: auto;
				border-radius: 20rpx;
			}
			.kaoleft{
				flex: 1;
				display: flex;
				flex-direction: column;
				margin-right: 20rpx;
				.kaotit{
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #111111;
				}
				.kaobot{
					margin-top: 50rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
					.kaoqi{
						display: flex;
						flex-direction: row;
						align-items: center;
						margin-right: 40rpx;
						.ticon{
							width: 18rpx;
							height: 18rpx;
							margin-right: 10rpx;
						}
						.sjians{
							font-family: PingFang SC;
							font-weight: 500;
							font-size: 22rpx;
							color: #999999;
						}
					}
				}
			}
		}
	}

	.xie{
		margin: 40rpx 0;
		display: flex;
		align-items: center;
		justify-content: center;

		text{
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 36rpx;
			color: #333333;
			text-align: center;
		}
	}
	.pinlist{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		.pinitem{
			width: 31%;
			height: 120rpx;
			background-color: #fff;
			padding: 30rpx;
			margin: 0 15rpx 15rpx 0;
			box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(202,205,217,0.26);
			border-radius: 4rpx;

			.Kaplan_logo{
				width: 150rpx;

			}
		}
	}

	.shiliview{
		margin-top: 30rpx;
		.swiper-block-shili {
			height: 790rpx;
			width: 100%;
			.swiper-item-shili {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: flex-start;
				overflow: unset;
				position: relative;
				.skaoview{
					background: #FFFFFF;
					box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(202,205,217,0.4);
					border-radius: 10rpx;
					border: 1px solid #EEEEEE;
					position: relative;
					.kaooneimg{
						height: 350rpx;
						position: relative;
						width: 100%;
					}
					.jinpai{
						padding: 30rpx;
						display: flex;
						flex-direction: column;
						.jinname{
							font-family: PingFangSC;
							font-weight: bold;
							font-size: 32rpx;
							color: #111111;
							display: block;
							margin-bottom: 15rpx;
						}
						.bqian{
							display: flex;
							flex-direction: row;
							.qianitem{
								padding: 6rpx 10rpx;
								background: #FEF6F2;
								border-radius: 4rpx;
								border: 1px solid #FFDDCC;
								font-family: PingFang SC;
								font-weight: 500;
								font-size: 22rpx;
								color: #FA7938;
								display: inline-block;
								margin-right: 10rpx;
							}
						}
					}
				}
				.slide-image {
					height: 640rpx;
					width: 500rpx;
					border-radius: 9rpx;
					box-shadow: 0px 0px 30rpx rgba(0, 0, 0, 0.2);
					margin: 0rpx 40rpx;
					z-index: 1;
				}
				.active {
					transform: scale(1.14);
					transition: all 0.2s ease-in 0s;
					z-index: 20;
					}
				}
		}

	}
}
.kaoji{
	background-color: rgba(255, 255, 255, 0.4);
	border-radius: 20rpx;
	min-height: 200rpx;
	box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(202,205,217,0.4);
	border-radius: 30rpx 10rpx 10rpx 10rpx;
	margin: 0 30rpx;
	.kaoone{
		background: linear-gradient(-90deg, #FA4E4E, #FD894F);
		border-radius: 20rpx 20rpx 0 0;
		height: 80rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		.kaoleft{
			width: 80rpx;
			height: 20rpx;
		}
		.ktit{
			font-family: PingFangSC;
			font-weight: bold;
			font-size: 32rpx;
			color: #FFFFFF;
			display: inline-block;
			margin: 0 30rpx;
		}
	}
	.katwo{
		display: flex;
		flex-direction: column;
		background-color: #fff;
		padding: 50rpx 30rpx;
		.kaoxuan{
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-bottom: 30rpx;
			.xuanitem{
				width: 48%;
				padding: 15rpx;
				min-height: 80rpx;
				border-radius: 10rpx;
				border: 1rpx solid #EEEEEE;
				display: flex;
				flex-direction: row;
				align-items: center;

				.xuantit{
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #333333;
					min-height: 30px;
					display:flex;
					align-items: center;
				}
				.getfan{
					margin-left: auto;
				}
				/deep/.u-input__input{
					min-height: 30px !important;
				}
			}
		}
		.yyue{
			height: 80rpx;
			background: linear-gradient(-90deg, #FA4E4E, #FD894F);
			border-radius: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #FFFFFF;
		}
	}
	.kathree{
		height: 60rpx;
		background: #FEF6F2;
		border-radius: 0rpx 0rpx 10rpx 10rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		.kaitem{
			// width: 40%;
			display: flex;
			flex-direction: row;
			align-items: center;
			margin: 0 30rpx;
			.kaodui{
				width: 20rpx;
				height: 14rpx;
				margin-right: 10rpx;
			}
			.katit{
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 22rpx;
				color: #FA7938;
			}
		}
	}
}
.yin{
	background: #F6F7FB !important;
	// padding: 30rpx !important;
	height: 30rpx;
}
.st{
	/deep/.u-mode-center-box{
		background-color: transparent;
	}
	.stpop{
		background-color: #fff;
		height: 550rpx;
		background: #FFFFFF;
		border-radius: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;
		.mapop{
			width: 300rpx;
			height: 300rpx;
			margin-bottom: 50rpx;
		}
		.matit{
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 22rpx;
			color: #FA7938;
		}
		.chaview{
			position: absolute;
			right: 0rpx;
			top: 0rpx;
			width: 40rpx;
			height: 40rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(202,205,217,0.4);
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			// position: relative;
			.macha{
				width: 30rpx;
				height: 30rpx;
			}
		}
	}
}
/deep/uni-swiper {
		height: 165px;
	}
</style>
